<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>煤球对战平台 - {{$game_name}}</title>
	<link rel="stylesheet" href="hall/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="hall/css/pokerhall.css">
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="hall/js/hallimg.js"></script>
</head>
<body>
	
	@include('home/header')

	<div class="container page-main">
		<div class="row"></div>
		<div class="row hall-main">
			<div class="col-md-9 hall-left">
				<div class="hall-table {{$game_id}}1A" value="{{$game_id}}1A">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}1B" value="{{$game_id}}1B">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}1C" value="{{$game_id}}1C">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}1D" value="{{$game_id}}1D">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}1E" value="{{$game_id}}1E">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}2A" value="{{$game_id}}2A">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}2B" value="{{$game_id}}2B">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}2C" value="{{$game_id}}2C">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}2D" value="{{$game_id}}2D">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}2E" value="{{$game_id}}2E">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}3A" value="{{$game_id}}3A">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}3B" value="{{$game_id}}3B">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}3C" value="{{$game_id}}3C">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}3D" value="{{$game_id}}3D">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}3E" value="{{$game_id}}3E">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}4A" value="{{$game_id}}4A">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}4B" value="{{$game_id}}4B">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}4C" value="{{$game_id}}4C">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}4D" value="{{$game_id}}4D">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
				<div class="hall-table {{$game_id}}4E" value="{{$game_id}}4E">
					<img value="user_a" class="table-user user_a" src="">
					<img class="table-table" src="">
					<img value="user_c" class="table-user user_c" src=""> <br>
					<img value="user_b" class="table-user user_b" src="">
				</div>
			</div>

			<div class="col-md-3 hall-right">
				<div class="col-md-12">
					<h4>{{$game_name}} 大厅在线：<span id="peoples">0</span>人</h4>
				</div>
				<div id="user-list" class="col-md-12">
					<table class="table table-default">
						<tr>
							<th>玩家</th>
							<th>积分</th>
							<th>状态</th>
						</tr>
					</table>
				</div>
				<div class="user_chat col-md-12" id="chat-list">
					<!-- 聊天内容 -->
				</div>
				<div class="col-md-12 msgbox">
					<textarea class="form-control" id="message" rows="2"></textarea>
				</div>
				<div class="col-md-12">
					<button id="sendmsg" class="btn btn-primary pull-right">发 送</button>
				</div>
			</div>
		</div>
	</div>

	
	<iframe id="thegame" src="" frameborder="0" style="width:100%;" scrolling="no"></iframe>
	
	
	<footer>
		<div class="foot-banner">
			<div class="col-md-12">
				<ul>
					<li><a href="">Nginx</a></li>
					<li><a href="">Apache</a></li>
					<li><a href="">PHP</a></li>
					<li><a href="">Swoole</a></li>
					<li><a href="">Redis</a></li>
					<li><a href="">MariaDB</a></li>
					<li><a href="">Bootstrap</a></li>
					<li><a href="">JQuery</a></li>
				</ul>
			</div>
		</div>

		<div class="foot-main">
			<div class="foot-main-info">
				<h5><span>｜</span> LEGAL &amp; COPYRIGHT</h5>
				<p class="foot-text">本站严格遵守我国互联网管理条例和相关法律规定,抵制一切不良信息。</p>
				<p class="foot-text">如果您认为本站内容对您的权利有所侵犯，请联系我们及时移除。</p>
			</div>
			<div class="foot-main-info">
				<h5><span>｜</span> ABOUT US</h5>
				<p class="foot-text">本平台用于技术研究和休闲，是一个娱乐性质的开源程序。我们已经列出了所有用到的开源技术。</p>
				<p class="foot-text">您可以下载源码和文档，自行搭建环境，进行改造和开发。</p>
			</div>
			<div class="foot-main-info">
				<h5><span>｜</span> CODE &amp; DOCUMENT</h5>
				<a class="foot-href" href=""><i class="fa fa-file"></i> 文档 &nbsp;</a>
				<hr>
				<a class="foot-href" href=""><i class="fa fa-square"></i> 源码 &nbsp;</a>
			</div>
			<div class="foot-main-info">
				<h5><span>｜</span> AUTHOR INFO</h5>
				<a class="foot-author" href="">袁不语 &gt;&gt;&nbsp;</a><br>
				<a class="foot-author" href="">姜富帅 &gt;&gt;&nbsp;</a><br>
				<a class="foot-author" href="">九州志 &gt;&gt;&nbsp;</a><br>
				<a class="foot-author" href="">蜂窝煤 &gt;&gt;&nbsp;</a><br>
			</div>
		</div>

		<div class="foot-info">
			<span class="foot-copy">艺名人士 &copy; GPL </span>
			<span class="foot-icp"><a href="http://www.miitbeian.gov.cn">牛ICP备 - 66666666</a> </span>
		</div>

		<div class="bigborder col-md-12"></div>

	</footer>
</body>

<script src="hall/js/jquery-1.11.1.min.js"></script>
<script src="hall/bootstrap/js/bootstrap.min.js"></script>

<script>
	var wsServer = 'ws://119.29.13.52:7717';
	var point = '{{$point}}';
	var user_nick = '{{$user_nick}}';
	var thispage = "{{url('/esyhall')}}";
	var gameurl = "{{url('/esyroom')}}";

	var roomid = '';
	var seatid = '';

	//显示游戏页面
	function showgameev() {
		$('header').hide();
		$('footer').hide();
		$('.page-main').hide();
		$('#thegame').show();
		$('#thegame').height($(document).height());
		$('#thegame').attr('src', gameurl);
	}

	//回到游戏大厅
	function backhall() {
		window.location = thispage;
	}

	//初始化房间信息
	function getroominfo() {
		websocket.send('getroominfo'+'{"roomid":"'+roomid+'","seatid":"'+seatid+'"}');
	}

	//刷新大厅座位情况
	function refreshtables(info) {
		jQuery.each(info, function(t, val){
			if (val.status == 'off') {
				$($('.'+t).children()[1]).attr('src', pokerready_png);
			} else {
				$($('.'+t).children()[1]).attr('src', pokergaming_png);
			}
	        if (val.user_a == 'off') {
	        	$($('.'+t).children()[0]).attr('src', nobody_png);
	        }
	        if (val.user_b == 'off') {
	        	$($('.'+t).children()[2]).attr('src', nobody_png);
	        }
	        if (val.user_c == 'off') {
	        	$($('.'+t).children()[4]).attr('src', nobody_png);
	        }
		});
	}

	//刷新在线列表
	function refreshuserlist(userlist) {
		var count = 0;
		$('#user-list > table').html('<tr><th>玩家</th><th>积分</th><th>状态</th></tr>');
		jQuery.each(userlist,function(i,val){
			$('#user-list > table').append(
				'<tr><td>'+val.user_nick+'</td><td>'+val.point+'</td><td>'+val.status+'</td></tr>'
			);
			count ++;
		});
		$('#peoples').html(count);
	}

	//发布准备和取消准备的事件
	function pushreadystatus(info) {
		websocket.send('getroominfo'+'{"roomid":"'+roomid+'","seatid":"'+seatid+'"}');
	}

    $(document).ready(function(){
    	//实例化websocket
    	websocket = new WebSocket(wsServer);
    	//隐藏游戏iframe面板
    	$('#thegame').hide();
	    websocket.onopen = function (evt) {
	        console.log("握手成功"+evt);
	        //发送自己的在线状态 + 取得在线列表 + 取得大厅座位详情
	        websocket.send('mystatus'+'{"point":"'+point+'","user_nick":"'+user_nick+'","status":"空闲"}');
	        websocket.send('getonlines');
	        websocket.send('tableinfos');
	    };
	    
		websocket.onclose = function (evt) {
		    alert("连接已经断开!");
		};
	    websocket.onmessage = function (evt) {
	    	if (evt.data.substr(0,8) == 'pulllist') {
	    		//更新在线列表的推送
	    		refreshuserlist(JSON.parse(evt.data.substr(8)));
	    	} else if (evt.data.substr(0,10) == 'pulltables') {
	    		//更新房间信息的推送
	    		refreshtables(JSON.parse(evt.data.substr(10)));
	    	} else if (evt.data.substr(0,8) == 'seatdown') {
	    		//确认是否可以坐下的推送
	    		if (evt.data.substr(8,2) == 'ok') {
	    			showgameev();
	    		} else { return false; }
	    	} else if (evt.data.substr(0,12) == 'pullroominfo') {
	    		//取得房间信息的推送
	    		var info = JSON.parse(evt.data.substr(12));
	    		console.log(info);
	    	} else {
	    		//将聊天消息加入到列表
	    		$('#chat-list').append('<div class="chat-list"><b>'+'{{$user_nick}}'+' 说: </b><p>'+evt.data+'</p></div>');
	        	$('#chat-list').scrollTop($('#chat-list')[0].scrollHeight);
	    	}
	    };
		websocket.onerror = function (evt, e) {
		    console.log('错误！: ' + evt.data);
		};

		//发送按钮事件
		$('#sendmsg').click(function() {
	 		var msg = $('#message').val();
	 		$('#message').val('');
	 		if (msg.substr(0,10) == 'getonlines' || msg.substr(0,9) == 'mysession' || msg.substr(0,9) == 'tableinfos' || msg.substr(0,8) == 'seatdown' || msg.substr(0,11) == 'getroominfo') {
	 			return flase;
	 		}
	 		websocket.send(msg);
	 	});

		//回车键发送事件
	 	$('#message').keyup(function(event) {
			if (event.keyCode ==13) {
				$('#sendmsg').click();
			}
		});

		//按下座位事件
	 	$('.table-user').click(function(ev){
	 		var table = $($(ev.target).parent()).attr('value');
	 		var seat = $(ev.target).attr('value');
	 		roomid = table;
	 		seatid = seat;
    		websocket.send('seatdown'+'{"table":"'+table+'","seat":"'+seat+'"}');
    	})
    });


</script>

</html>